<template>
  <div class="login-container">
    <el-form ref="loginForm" class="login-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">数据清理</h3>
      </div>
      <el-button v-for="(item,index) in btnList" :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleData(item)">{{item.text}}</el-button>
    </el-form>
  </div>
</template>
<script>
import { clearQueryAllData } from "@/api/user";
import { confirm } from '@/utils/index'
export default {
  name: 'Login',
  data() {
    return {
     loading:false,
     btnList:[
      {
        text:'清理日数据',
        type:'d'
      },
      {
        text:'清理小时数据',
        type:'h'
      },
      {
        text:'清理月数据',
        type:'m'
      },
      {
        text:'清理所有数据',
        type:'all'
      }
     ]
    }
  },
  watch: {
   
  },
  methods: {
    async handleData({type,text}){
      const res = await confirm('确定 ' + '"' + text + '"' +' 吗？')
      if (!res) return
      this.loading = true
      clearQueryAllData(type).then(res=>{
        this.$message({
          message: text + '成功' ,
          type: 'success'
        });
        this.loading = false
      })
    }
  }
}
</script>
<style lang="scss" scoped>
$bg:#2d3a4b;
$light_gray:#eee;

::v-deep .el-button+.el-button{
  margin-left: 0px;
}
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: $bg;

  .login-form {
    width: 520px;
    max-width: 100%;
    padding: 160px 35px 0;
    margin: 0 auto;
  }
  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
}
</style>
